<template>
	<view class="select-page">
		
		<!-- 搜索功能，后期优化使用 -->
		<!-- <view class="search-bar">
		  <v-search-bar :disabled="true" @click="goSearch"></v-search-bar>
		</view> -->
		
		
		<view class="select">
		  <!-- 左侧一级分类 -->
		  <view class="aside-bar">
		    <scroll-view scroll-y style="height: 100%" :scroll-top="scrollTop" scroll-with-animation>
		      <view class="aside-bar__scroll">
		        <view
		          class="aside-bar__scroll-item ellipsis"
		          :class="{ active: current === index }"
		          v-for="(item, index) in tabs"
		          :key="index"
		          @click="chooseOne(item,index)"
		        >
		          {{ item.name }}
		        </view>
		      </view>
		    </scroll-view>
		  </view>
		
		  <!-- 右侧二级分类 -->
		  <view class="cate-content">
		   
		
		    <!-- 列表 -->
		    <view class="cate-content__list">
					<!-- @scrolltolower="scrollReachBottom" 后期需优化加载功能-->
		      <scroll-view scroll-y scroll-with-animation style="height: 100%" >
		        <block v-if="childCategories.length > 0">
		          <view
		            class="cate-content__list-item"
		            v-for="(item, index) in childCategories"
		            :key="index"
		            @click="getBack(item)"
		          >
		            <view class="cate-content__thumbnail">
		              <image  :src="item.cover" mode="aspectFill"/>
		            </view>
		
		            <view class="cate-content__list-item-info">
		              <view class="cate-content__title" v-if="item.name" >{{item.name }}</view>
									<view class="cate-content__title" v-else>{{item.title }}</view>
		              <view class="cate-content__desc">{{ item.intro }}</view>
		            </view>
		          </view>
							
		          <u-loadmore :status="loadmore" bg-color="transparent" />
		        </block>
						<view class="none" v-if="childCategories.err === 1">
							赶快去创建你的小说吧~
						</view>
		      </scroll-view>
					
		    </view>
		  </view>
			
		</view>
	</view>
	
	
</template>

<script>
import api from '../../../common/api.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      current: 0, // 当前选中的一级分类
      scrollTop: 0, // 距离顶部的距离
			cateList:[], //获取到的分类数据(未处理)
			uid:null, //当前用户id
			tabs:[{name:"诗歌"},{name:"文章"},{name:"小说"}], // 一级分类
      tab: [], // 部分一级分类
      childCategories: [], // 二级分类
      page: 1, // 分页
      loadmore: 'loadmore'
    }
  },
  methods: {
    // 选择一级栏目
    chooseOne(item,index) {
      this.current = index
      this.loadmore = 'loadmore'
      this.getChildCategoryData(index)
			
      this.setScrollPos()
    },
    setScrollPos() {
      let query = uni.createSelectorQuery().in(this)
      let containerHeight = 0
      query
        .select('.aside-bar')
        .boundingClientRect((data) => {
          // 容器的高度
          containerHeight = data.height
        })
        .exec()

      // 循环一级分类的数量
      query
        .selectAll('.aside-bar__scroll-item')
        .boundingClientRect((data) => {
          // 总的数量
          let itemCount = data.length
          // 单个的高度
          let itemHeight = data[0].height
          // 计算距离上侧的距离
          let currentHeight = (this.current + 1) * itemHeight
          if (containerHeight) {
            this.scrollTop = currentHeight - containerHeight / 2
          }
        })
        .exec()
    },
    goSearch() {
      uni.navigateTo({
        url: '../product/product?type=search'
      })
    },
    // 点击二级栏目
    getBack(item) {
				uni.$emit('selectedWorks',item)
				setTimeout(function() {
					uni.navigateBack({  
						delta: 1  
					});
				}, 500)
		},
		async joinCir(cid) {//加入圈子
			let jres = await api.JoinCir(cid)
			console.log(jres);
			if(jres.err == 0) {
				uni.showToast({
					title:jres.msg,
					duration:700
				})
				this.flag = !this.flag
			}
		},
    // 获取一级栏目数据
    async getCategoryData() {//获取圈子分类
      
    },
		 // 获取二级栏目数据
		async getChildCategoryData(index) {
			if(this.current == 0) {
				this.childCategories = await api.GetPoems()
			}else if(this.current == 1) {
				this.childCategories = await api.GetArticles()
			}else if(this.current == 2) {
				this.childCategories = await api.GetNovels()
			}
			// this.childCategories = await api.GetCateCirList(cateid)
			console.log(this.childCategories);
		},
		async getMe() {	
			let res = await api.GetMe()
			this.uid = res.id
			console.log(this.uid);
		}
    // 获取二级栏目数据
    /* getChildCategoryData() {
      this.loadmore = 'loading'
      this.$u.api.goods
        .category({
          category_id: this.tabs[this.current].category_id,
          page: this.page
        })
        .then((resp) => {
          if (resp.data.length > 0) {
            this.loadmore = 'loadmore'
            this.childCategories = this.childCategories.concat(resp.data)
          } else {
            this.loadmore = 'nomore'
          }
        })
				
    }, */
    // 上拉加载更多
    /* scrollReachBottom() {
      if (this.loadmore !== 'nomore') {
        this.page += 1
        this.getChildCategoryData()
      }
    } */
  },
  async created() {
		await this.getMe()
    await this.getChildCategoryData()
  }
/*  computed: {
    ...mapState(['cartNum'])
  },
  onShow() {
    this.cartNum > 0 &&
      uni.setTabBarBadge({
        index: 2,
        text: this.cartNum.toString()
      })
  } */
}
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.search-bar {
	height: 70rpx;
	box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
}
.select {
  display: flex;
  justify-content: space-between;

  .aside-bar {
    width: 210rpx;
    /* #ifdef H5 */
    height: calc(100vh - 44px - 50px);
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    background-color: #f3f3f3;

    &__scroll {
      &-item {
        position: relative;
        width: 100%;
        height: 116rpx;
        line-height: 116rpx;
				text-align: center;
        box-sizing: border-box;
        transition: all 0.3s;
				font-size: 32rpx;
				font-weight: bold;
				color: #b4b8b9;
        /* &::before {
          background-color: #c7b099;
          width: 4rpx;
          height: 0;
          position: absolute;
          content: '';
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          transition: all 0.3s;
        } */

        &.active {
          background-color: #fff;
          color: #0068FF;

          &::before {
            height: 32rpx;
          }
        }
      }
    }
  }
	.none {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #A7AAB5;
	}
  .cate-content {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;

    &__list {
      /* #ifdef H5 */
      height: calc(100vh - 44px - 50px - 160rpx);
      /* #endif */
      /* #ifndef H5 */
      height: calc(100vh - 160rpx);
      /* #endif */

      &-item {
        display: flex;
        // margin-bottom: 26rpx;
				padding: 10rpx 8rpx;
				border-bottom: 2rpx solid #eeeeee;
				
        &-info {
					display: flex;
					flex-direction: column;
					
          flex: 1;
					justify-content: center;
          overflow: hidden;
					
        }
      }
    }

    &__thumbnail {
			width: 140rpx;
			height: 110rpx;
      border-radius: 10rpx;
      overflow: hidden;
      margin-right: 24rpx;
			image {
				width: 100%;
				height: 100%;
				border: 8rpx;
			}
    }

    &__title {
      // font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    &__desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 26rpx;
      color: #999;
    }

    
  }
}
</style>

